Motion >> Repos - motion-next.git/blob

   1 <md-dialog class="inboundroute-dialog" aria-label="New Interval">
   2   <form name="intervalForm" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-accent md-hue-2">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{ vm.title | translate }}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <md-dialog-content ms-scroll>
  20       <div class="error-list">
  21         <div
  22           ng-repeat="error in vm.errors"
  23           class="error"
  24           layout="row"
  25           layout-align="space-between center"
  26         >
  27           <div>
  28             <span class="message">{{error.message}}</span>
  29             <span class="type">({{error.type}})</span>
  30           </div>
  31           <md-button class="md-icon-button">
  32             <md-icon
  33               md-font-icon="icon-alert-box"
  34               aria-label="alert error"
  35               class="s16"
  36             ></md-icon>
  37           </md-button>
  38         </div>
  39       </div>
  40
  41       <md-input-container class="md-block">
  42         <label translate="TOOLS.NAME">Name</label>
  43         <input
  44           ng-model="vm.interval.name"
  45           type="text"
  46           name="name"
  47           placeholder="{{'TOOLS.NAME' | translate}}"
  48           ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  49           md-autofocus
  50           required
  51         />
  52         <div
  53           ng-messages="intervalForm.name.$error"
  54           ng-show="intervalForm.name.$touched"
  55           role="alert"
  56         >
  57           <div ng-message="required">
  58             <span translate="TOOLS.ERRORS.NAME_REQUIRED"
  59               >Name field is required</span
  60             >
  61           </div>
  62         </div>
  63       </md-input-container>
  64
  65       <md-input-container class="md-block">
  66         <label translate="TOOLS.TYPE">Type</label>
  67         <md-select
  68           ng-model="vm.type"
  69           ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  70         >
  71           <md-option ng-value="type" ng-repeat="type in vm.types"
  72             >{{ type | ucfirst }}</md-option
  73           >
  74         </md-select>
  75       </md-input-container>
  76
  77       <md-input-container class="md-block" ng-if="vm.type === 'list'">
  78         <label translate="TOOLS.INTERVALS">Intervals</label>
  79         <md-select
  80           ng-model="vm.interval.IntervalId"
  81           ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  82         >
  83           <md-option ng-value="interval.id" ng-repeat="interval in vm.intervals"
  84             >{{ interval.name }}</md-option
  85           >
  86         </md-select>
  87       </md-input-container>
  88
  89       <!-- TIMERANGE START -->
  90       <label ng-if="vm.type === 'custom'" translate="TOOLS.TIME_RANGE"
  91         >Time Range</label
  92       >
  93       <div layout="row" ng-if="vm.type === 'custom'">
  94         <div class="md-block" flex>
  95           <mdp-time-picker
  96             name="timeRangeFrom"
  97             mdp-placeholder="FROM"
  98             ng-model="vm.timeRangeFrom"
  99             mdp-format="HH:mm"
 100             mdp-auto-switch="true"
 101             mdp-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 102           >
 103             <div
 104               ng-messages="intervalForm.timeRangeFrom.$error"
 105               ng-show="intervalForm.timeRangeFrom.$touched"
 106               role="alert"
 107             >
 108               <div ng-message="format">
 109                 <span translate="TOOLS.ERRORS.TIME_RANGE_FROM_INVALID"
 110                   >Time Range From field is invalid</span
 111                 >
 112               </div>
 113             </div>
 114           </mdp-time-picker>
 115         </div>
 116         <div class="md-block" flex ng-if="vm.timeRangeFrom">
 117           <mdp-time-picker
 118             name="timeRangeTo"
 119             mdp-placeholder="TO*"
 120             ng-model="vm.timeRangeTo"
 121             mdp-format="HH:mm"
 122             mdp-auto-switch="true"
 123             mdp-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 124             required
 125           >
 126             <div
 127               ng-messages="intervalForm.timeRangeTo.$error"
 128               ng-show="intervalForm.timeRangeTo.$invalid"
 129               role="alert"
 130             >
 131               <div ng-message="format">
 132                 <span translate="TOOLS.ERRORS.TIME_RANGE_TO_INVALID"
 133                   >Time Range To field is invalid</span
 134                 >
 135               </div>
 136               <div ng-message="required">
 137                 <span translate="TOOLS.ERRORS.TIME_RANGE_TO_REQUIRED"
 138                   >Time Range To field is required</span
 139                 >
 140               </div>
 141             </div>
 142           </mdp-time-picker>
 143         </div>
 144       </div>
 145       <!-- TIMERANGE END -->
 146
 147       <!-- DAYSOFWEEK START -->
 148       <label ng-if="vm.type === 'custom'" translate="TOOLS.WEEK_DAYS"
 149         >Week Days</label
 150       >
 151       <div layout="row" ng-if="vm.type === 'custom'">
 152         <md-input-container flex class="md-block">
 153           <label translate="TOOLS.FROM">From</label>
 154           <md-select
 155             ng-model="vm.dayOfWeekFrom"
 156             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 157           >
 158             <md-option ng-value="null"
 159               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 160             >
 161             <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"
 162               ><span translate="TOOLS.{{day.value | uppercase}}"
 163                 >{{ day.value | ucfirst }}</span
 164               ></md-option
 165             >
 166           </md-select>
 167         </md-input-container>
 168
 169         <md-input-container flex class="md-block" ng-if="vm.dayOfWeekFrom">
 170           <label translate="TOOLS.TO">To</label>
 171           <md-select
 172             name="dayOfWeekTo"
 173             ng-model="vm.dayOfWeekTo"
 174             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 175           >
 176             <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"
 177               ><span translate="TOOLS.{{day.value | uppercase}}"
 178                 >{{ day.value | ucfirst }}</span
 179               ></md-option
 180             >
 181           </md-select>
 182           <div
 183             ng-messages="intervalForm.dayOfWeekTo.$error"
 184             ng-show="intervalForm.dayOfWeekTo.$touched"
 185             role="alert"
 186           ></div>
 187         </md-input-container>
 188       </div>
 189       <!-- DAYSOFWEEK END -->
 190
 191       <!-- MONTHDAY START -->
 192       <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTH_DAYS"
 193         >Time Range</label
 194       >
 195       <div layout="row" ng-if="vm.type === 'custom'">
 196         <md-input-container flex layout="column" class="md-block">
 197           <label translate="TOOLS.FROM">From</label>
 198           <md-select
 199             ng-model="vm.monthDayFrom"
 200             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 201           >
 202             <md-option ng-value="null"
 203               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 204             >
 205             <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth"
 206               >{{ month }}</md-option
 207             >
 208           </md-select>
 209         </md-input-container>
 210
 211         <md-input-container
 212           flex
 213           layout="column"
 214           class="md-block"
 215           ng-if="vm.monthDayFrom"
 216         >
 217           <label translate="TOOLS.TO">To</label>
 218           <md-select
 219             name="monthDayTo"
 220             ng-model="vm.monthDayTo"
 221             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 222           >
 223             <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth"
 224               >{{ month }}</md-option
 225             >
 226           </md-select>
 227           <div
 228             ng-messages="intervalForm.monthDayTo.$error"
 229             ng-show="intervalForm.monthDayTo.$touched"
 230             role="alert"
 231           ></div>
 232         </md-input-container>
 233       </div>
 234       <!-- MONTHDAY END -->
 235
 236       <!-- MONTH START -->
 237       <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTHS"
 238         >Time Range</label
 239       >
 240       <div layout="row" ng-if="vm.type === 'custom'">
 241         <md-input-container flex layout="column" class="md-block">
 242           <label translate="TOOLS.FROM">From</label>
 243           <md-select
 244             ng-model="vm.monthFrom"
 245             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 246           >
 247             <md-option ng-value="null"
 248               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 249             >
 250             <md-option ng-value="month.value" ng-repeat="month in vm.monthName"
 251               ><span translate="TOOLS.{{month.value | uppercase}}"
 252                 >{{ month.value | ucfirst }}</span
 253               ></md-option
 254             >
 255           </md-select>
 256         </md-input-container>
 257
 258         <md-input-container
 259           flex
 260           layout="column"
 261           class="md-block"
 262           ng-if="vm.monthFrom"
 263         >
 264           <label translate="TOOLS.TO">To</label>
 265           <md-select
 266             name="monthTo"
 267             ng-model="vm.monthTo"
 268             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 269           >
 270             <md-option ng-value="month.value" ng-repeat="month in vm.monthName"
 271               ><span translate="TOOLS.{{month.value | uppercase}}"
 272                 >{{ month.value | ucfirst }}</span
 273               ></md-option
 274             >
 275           </md-select>
 276           <div
 277             ng-messages="intervalForm.monthTo.$error"
 278             ng-show="intervalForm.monthTo.$touched"
 279             role="alert"
 280           ></div>
 281         </md-input-container>
 282       </div>
 283       <!-- MONTH END -->
 284
 285       <div class="error-list">
 286         <div
 287           ng-repeat="error in vm.errors"
 288           class="error"
 289           layout="row"
 290           layout-align="space-between center"
 291         >
 292           <div>
 293             <span class="message">{{error.message}}</span>
 294             <span class="type">({{error.type}})</span>
 295           </div>
 296           <md-button class="md-icon-button">
 297             <md-icon
 298               md-font-icon="icon-alert-box"
 299               aria-label="alert error"
 300               class="s16"
 301             ></md-icon>
 302           </md-button>
 303         </div>
 304       </div>
 305     </md-dialog-content>
 306
 307     <md-dialog-actions layout="row" layout-align="space-between center">
 308       <div layout="row" layout-align="start center">
 309         <md-button
 310           type="submit"
 311           ng-if="!vm.newInterval && vm.crudPermissions.canEdit"
 312           ng-click="vm.saveInterval()"
 313           class="send-button md-accent md-raised"
 314           ng-disabled="intervalForm.$invalid || intervalForm.$pristine"
 315           aria-label="SAVE"
 316           translate="TOOLS.SAVE"
 317           translate-attr-aria-label="TOOLS.SAVE"
 318         >
 319           SAVE
 320         </md-button>
 321
 322         <md-button
 323           type="submit"
 324           ng-if="vm.newInterval && vm.crudPermissions.canEdit"
 325           ng-click="vm.addNewInterval()"
 326           class="send-button md-accent md-raised"
 327           ng-disabled="intervalForm.$invalid"
 328           aria-label="ADD"
 329           translate="TOOLS.ADD_INTERVAL"
 330           translate-attr-aria-label="TOOLS.ADD_INTERVAL"
 331         >
 332           ADD INTERVAL
 333         </md-button>
 334       </div>
 335     </md-dialog-actions>
 336   </form>
 337 </md-dialog>